<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            margin: 0;
            padding: 0;
        }
        .container{
            width: 300px;
            height: 600px;
            border:1px solid #000;
            display: flex;
            flex-direction: column;
            position: relative;
            background-color: #f7f8fa;
        }
        .title{
            text-align: center;
            border-bottom: 1px solid #ccc;
            padding: 10px;
            background-color: #fff;
        }
        .content{
            padding: 10px;
            height: 80%;
            overflow: auto;
            
        }
        .content::-webkit-scrollbar {
            display: none;
        }
        .send{
            position:absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            
        }
        .right{
            display: flex;
            justify-content: end;
           
        }
        .box{
            display: flex;
            width: 280px;
        }
        .message{
            display: inline-block;
            max-width: 200px;
            min-width: 30px;
            padding: 5px;
            background-color: #95ec69;
            border-radius: 6px;
            font-size: 14px;
        }
        .message2{
            display: inline-block;
            max-width: 200px;
            min-width: 30px;
            padding: 5px;
            background-color: #fff;
            border-radius: 6px;
            font-size: 14px;
        }
         .name{
            width: 50px;
            text-align: center;
            overflow: hidden;
            /* 一行显示，不换行 */
            white-space: nowrap; 
            /* 文本溢出 出现省略号 */
            text-overflow: ellipsis;
         }
    </style>
</head>
<body>
    <div class="container">
        <div class="title">欢迎来到聊天室，大家一起畅聊吧!</div>
        <div class="content">
            <div id="messageList"></div>

            <div id="tips"></div>
        </div>
        <div class="send">
            <input type="text" id="nameInput" placeholder="输入你的名字">
            <input type="text" id="info"  placeholder="输入信息">
            <button>send</button>
        </div>
    </div>
    <script>

        const ws=new WebSocket('ws://192.168.1.109:4500')

        let messageList=document.querySelector('#messageList')
        let tips=document.querySelector('#tips')
        let nameInput=document.querySelector('#nameInput')
        let info=document.querySelector('#info')
        let senBtn=document.querySelector('button')

        senBtn.addEventListener('click',()=>{
            if(nameInput.value===''){
                alert('请先输入名字')
                return
            }
             messageList.innerHTML+=`<p class='right'><span class='message'>${info.value}</span><strong class='name'>:${nameInput.value}</strong></p>`
        //    ws.onopen=()=>{
            ws.send(JSON.stringify({
                message:info.value,
                username:nameInput.value
            }))
        //    }

            info.value=''
        })

        info.addEventListener('keyup',(event)=>{
            
            if(nameInput.value===''){
                alert('请先输入名字')
                return
            }
            if(event.keyCode===13){
                 messageList.innerHTML+=`<p class='right'><span class='message'>${info.value}</span><strong class='name'>:${nameInput.value}</strong></p>`
            

        //    ws.onopen=()=>{
            ws.send(JSON.stringify({
                message:info.value,
                username:nameInput.value
            }))
        //    }
            info.value=''
            }

        })

        ws.onmessage=(event)=>{
            console.log('event',event);
            const data=JSON.parse(event.data)
            messageList.innerHTML+=`<p class='box'><strong class='name'>${data.username}:</strong><span class='message2'>${data.message}</span></p>`
        }
    </script>
</body>
</html>